<template>
  <div class="dashboard-container">
    <user-title :image="avatar" :name="name" />
    <panel-group
      :mealCount="mealCount"
      :snacksCount="snacksCount"
      :userCount="userCount"
    />
    <el-row type="flex" justify="space-around">
      <el-col :xs="30" :sm="30" :lg="10">
        <h3>套餐点击频率</h3>
        <div class="chart-wrapper">
          <pie-chart :pieData="pieData" />
        </div>
      </el-col>
      <el-col :xs="30" :sm="30" :lg="10">
        <h3>订单量统计</h3>
        <div class="chart-wrapper">
          <bar-chart :barData="barData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserTitle from "./components/UserTitle";
import PanelGroup from "./components/PanelGroup";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import { getMealCount, getOrderCount } from "@/api/mealOrder";
import { getMeal, getSnacks } from "@/api/menu";
import { getUserList } from "@/api/user";
export default {
  name: "DashboardAdmin",
  components: {
    UserTitle,
    PanelGroup,
    PieChart,
    BarChart
  },
  computed: {
    ...mapGetters(["name", "avatar"])
  },
  data() {
    return {
      pieData: [],
      pieTmp1: [],
      pieTmp2: [],
      barData: [],
      mealCount: 0,
      snacksCount: 0,
      userCount: 0
    };
  },
  created() {
    this.getMealCount();
    this.getOrderCount();
    this.getMeal();
    this.getSnacks();
    this.getUser();
  },
  methods: {
    getMealCount() {
      this.listLoading = true;
      getMealCount().then(res => {
        this.pieTmp1 = res.data.slice(0, 4);
        this.pieTmp2 = res.data.slice(4);
        this.mealData();
        this.listLoading = false;
      });
    },
    mealData() {
      let a = 0;
      for (const item of this.pieTmp2) {
        a = a + Number(item.setOrderCount);
      }
      let tmpArray = this.pieTmp1.concat([
        { setName: "其它", setOrderCount: a }
      ]);
      for (let i = 0; i < tmpArray.length; i++) {
        let b = { value: tmpArray[i].setOrderCount, name: tmpArray[i].setName };
        this.pieData.push(b);
      }
    },
    getOrderCount() {
      this.listLoading = true;
      getOrderCount().then(res => {
        this.orderData(res.data);
        this.listLoading = false;
      });
    },
    orderData(data) {
      let [Mon, Tue, Wed, Thu, Fri] = [0, 0, 0, 0, 0];
      for (const item of data) {
        switch (item.dayOfWeek) {
          case "1":
            Mon = Mon + Number(item.dayOrderCount);
            break;
          case "2":
            Tue = Tue + Number(item.dayOrderCount);
            break;
          case "3":
            Wed = Wed + Number(item.dayOrderCount);
            break;
          case "4":
            Thu = Thu + Number(item.dayOrderCount);
            break;
          case "5":
            Fri = Fri + Number(item.dayOrderCount);
            break;
        }
      }
      this.barData = [Mon, Tue, Wed, Thu, Fri];
    },
    getMeal() {
      this.listLoading = true;
      getMeal().then(res => {
        this.mealCount = res.data.length - 1;
        this.listLoading = false;
      });
    },
    getSnacks() {
      this.listLoading = true;
      getSnacks().then(res => {
        this.snacksCount = res.data.length - 1;
        this.listLoading = false;
      });
    },
    getUser() {
      this.listLoading = true;
      getUserList().then(res => {
        this.userCount = res.data.total - 1;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

h3 {
  color: #666;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
